/**
* 功能描述：日期范围选择器样式表
* @author jin xiaohang
* @date 2022/9/28 15:05
* @version 1.0
*/
@import "src/style/mixins/index";

//定义布局
@mixin date-range-picker-layout{

  //定义范围面板布局
  .#{$namespace}-date-range-picker-part{
    position: relative;
    width: 50%;

    //待选数据面板头部
    .#{$namespace}-date-range-picker-date-panel-header{
      border-bottom: 1px solid #f0f0f0;
      height: 40px;
      line-height: 40px;
      text-align: center;
      user-select: none;

      //待选面板头部容器
      .#{$namespace}-date-range-picker-date-panel-header-wrap{
        position: relative;

        //上一年翻页键
        .#{$namespace}-date-range-picker-prev-year-btn{
          left: 7px;
          height: 100%;
          position: absolute;
          top: 0;
          display: inline-block;
          padding: 0 5px;
          line-height: 40px;
          color: #00000073;
          font-size: 16px;
          &::before{
            @include date-range-picker-prev-btn-before;
          }

          &::after{
            @include date-range-picker-prev-btn-before;
          }

          &:hover{
            cursor: pointer;
          }
        }

        //上个月翻页键
        .#{$namespace}-date-range-picker-prev-month-btn{
          left: 29px;
          height: 100%;

          &::before{
            @include date-range-picker-prev-btn-before;
          }

          &:hover{
            cursor: pointer;
          }
        }

        //年选择日期选择布局
        .#{$namespace}-date-range-picker-select{
          margin: 0 50px;

          //年份选择
          >a{
            display: inline-block;
            padding: 0 2px;
            line-height: 40px;
            color: #000000d9;
            font-weight: 500;

            &:hover{
              cursor: pointer;
              color: #40a9ff;
            }
          }
        }

        //下个月翻页键
        .#{$namespace}-date-range-picker-next-month-btn{
          padding-right: 5px;


          &:hover{
            cursor: pointer;
          }

          //元素插入
          &::before{
            position: relative;
            top: -1px;
            display: inline-block;
            width: 8px;
            height: 8px;
            vertical-align: middle;
            border: solid #aaa;
            border-width: 1.5px 0 0 1.5px;
            border-radius: 1px;
            transform: rotate(135deg) scale(.8);
            transition: all .3s;
            content: "";
          }
        }

        //下一年翻页键
        .#{$namespace}-date-range-picker-next-year-btn{

          &:hover{
            cursor: pointer;
          }

          //元素之前插入
          &::before{
            @include date-range-picker-next-year-btn-before;
          }

          //元素之后插入
          &::after{
            @include date-range-picker-next-year-btn-before;
          }

        }
      }
    }

    //待选数据面板主体部分布局
    .#{$namespace}-date-range-picker-date-panel-body{
      padding: 8px 12px;
      height: 100%;

      //待选数据表格
      .#{$namespace}-date-range-picker-date-panel-table{
        text-align: center;
        width: 100%;
        max-width: 100%;

        //表格列头
        .#{$namespace}-date-range-picker-date-panel-table-header{
          padding: 6px 0;
          line-height: 18px;

          //列头单元格
          .#{$namespace}-date-range-picker-date-panel-table-header-inner{
            font-weight: 400;
          }

        }

        //表格主体
        .#{$namespace}-date-range-picker-table-body{

          //表格单元格
          .#{$namespace}-date-range-picker-table-cell{
            height: 30px;
            padding: 3px 0;
          }

        }
      }
    }

    //输入框容器布局
    .#{$namespace}-date-range-picker-input-wrap{
      position: relative;
      height: 34px;
      padding: 6px 10px;

      //输入框布局
      .#{$namespace}-date-range-input{
        position: relative;
        display: inline-block;
        width: 100%;
        height: 24px;
        padding: 4px 0;
        line-height: 24px;
      }
    }
  }

  //中间符号布局
  .#{$namespace}-date-range-picker-middle{
    position: absolute;
    left: 50%;
    z-index: 1;
    height: 34px;
    margin: 1px 0 0;
    padding: 0 150px 0 0;
    line-height: 34px;
  }

  //左侧面板布局
  .#{$namespace}-date-range-picker-part-left{
    float: left;
  }

  //右侧面板布局
  .#{$namespace}-date-range-picker-part-right{
    float: right;
  }


}

//定义上年上月按钮插入样式
@mixin date-range-picker-prev-btn-before{
  position: relative;
  top: -1px;
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border: solid #aaa;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 1px;
  transform: rotate(-45deg) scale(.8);
  transition: all .3s;
  content: "";

}

//定义下年按钮插入样式
@mixin date-range-picker-next-year-btn-before{
  position: relative;
  top: -1px;
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border:solid #aaa;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 1px;
  transform: rotate(135deg) scale(.8);
  transition: all .3s;
  content: "";

}

//定义样式
@include b(date-range-picker){
  height: 100%;
  width: 100%;
  max-width: 550px;
  max-height: 301px;
  position: relative;
  font-size: 14px;
  line-height: 1.5715;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #fff;
  border-radius: 2px;
  outline: none;
  box-shadow: 0 2px 8px #00000026;

  //定义范围面板样式
  .#{$namespace}-date-range-picker-part{

    //待选数据面板头部
    .#{$namespace}-date-range-picker-date-panel-header{
      border-bottom: 1px solid #f0f0f0;

      //待选面板头部样式
      .#{$namespace}-date-range-picker-date-panel-header-wrap{

        //上一年翻页键
        .#{$namespace}-date-range-picker-prev-year-btn{
          color: #00000073;
          font-size: 16px;
          &::before{
            @include date-range-picker-prev-btn-before;
          }

          &::after{
            @include date-range-picker-prev-btn-before;
          }

          &:hover{
            cursor: pointer;
          }
        }

        //上个月翻页键
        .#{$namespace}-date-range-picker-prev-month-btn{

          &::before{
            @include date-range-picker-prev-btn-before;
          }

          &:hover{
            cursor: pointer;
          }
        }

        //年选择日期选择样式
        .#{$namespace}-date-range-picker-select{
          //年份选择
          >a{
            color: #000000d9;
            font-weight: 500;

            &:hover{
              cursor: pointer;
              color: #40a9ff;
            }
          }
        }

        //下个月翻页键
        .#{$namespace}-date-range-picker-next-month-btn{

          &:hover{
            cursor: pointer;
          }

          //元素插入
          &::before{
            position: relative;
            top: -1px;
            display: inline-block;
            width: 8px;
            height: 8px;
            vertical-align: middle;
            border: solid #aaa;
            border-width: 1.5px 0 0 1.5px;
            border-radius: 1px;
            transform: rotate(135deg) scale(.8);
            transition: all .3s;
            content: "";
          }
        }

        //下一年翻页键
        .#{$namespace}-date-range-picker-next-year-btn{

          &:hover{
            cursor: pointer;
          }

          //元素之前插入
          &::before{
            @include date-range-picker-next-year-btn-before;
          }

          //元素之后插入
          &::after{
            @include date-range-picker-next-year-btn-before;
          }

        }
      }
    }

    //待选数据面板主体部分样式
    .#{$namespace}-date-range-picker-date-panel-body{

      //待选数据表格
      .#{$namespace}-date-range-picker-date-panel-table{
        border: 0;
        background-color: transparent;
        border-collapse: collapse;

        //表格列头样式
        .#{$namespace}-date-range-picker-date-panel-table-header{

          //列头单元格
          .#{$namespace}-date-range-picker-date-panel-table-header-inner{
            font-weight: 400;
          }

        }

        //表格主体
        .#{$namespace}-date-range-picker-table-body{

          //表格单元格
          .#{$namespace}-date-range-picker-table-cell{

            &:hover{
              cursor: pointer;
              background-color: #BFBFBF;
            }
          }

          //上个月日期样式
          .#{$namespace}-date-range-picker-table-last-month-cell{
            color: #BFBFBF;
            &:hover{
              cursor: pointer;
              background-color: #FFFFFF;
            }
          }

          //下个月日期样式
          .#{$namespace}-date-range-picker-table-next-month-cell{
            color: #BFBFBF;
            &:hover{
              cursor: pointer;
              background-color: #FFFFFF;
            }
          }

          //选中日期样式
          .#{$namespace}-date-range-picker-table-selected-cell{
            background-color: #BAE7FF;
            &:hover{
              cursor: pointer;
              background-color: #BAE7FF;
            }
          }
        }
      }
    }

    //输入框容器样式
    .#{$namespace}-date-range-picker-input-wrap{
      border-bottom: 1px solid #f0f0f0;

      //输入框布局
      .#{$namespace}-date-range-input{
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        transition: all .3s;
        border: 0;
        box-shadow: none;
      }
    }
  }

  //中间符号样式
  .#{$namespace}-date-range-picker-middle{
    color: #00000073;
    text-align: center;
    transform: translate(-50%);
    pointer-events: none;
  }

  //引用全局布局
  @include date-range-picker-layout;

}